import { Tooltip, ButtonGroup, Button } from '@douyinfe/semi-ui';
import { IconChevronLeft, IconChevronRight } from '@douyinfe/semi-icons';
import {  usePageContext, useStoreContext } from './dictionary-context';
import { useMemo } from 'react';
import { useNavigate } from 'react-router-dom';
import { nextItem, prevItem } from './reducer/dictionary-actions';

const DictionaryStepNav = ({}) => {
  const PageContext = usePageContext();
   const {
    state: { dictionary },
    useDispatch,
  } = useStoreContext();
  const PageAction = useMemo(() => {
    return {
      queryParams: PageContext.queryParams,
      setQueryParams: PageContext.setQueryParams,
    };
  }, [PageContext]);

 const { offset, index, totalCount }=dictionary;

  const offsetIndex = useMemo(() => offset + index, [offset, index]);

  const navigate = useNavigate();

  return (
    <Tooltip content="步进导航">
      <span>
        <ButtonGroup>
          <Button
            icon={<IconChevronLeft />}
            disabled={offsetIndex === 0}
            onClick={async () => {
               const entityKey = await useDispatch(
                prevItem,
                PageAction.queryParams
              );
              navigate(`../${entityKey}`, {
                replace: true,
                relative: 'path',
              });
            }}
          />
          <Button
            icon={<IconChevronRight />}
            disabled={totalCount - 1 === offsetIndex}
            onClick={async () => {
            const entityKey = await useDispatch(
                nextItem,
                PageAction.queryParams
              );
              navigate(`../${entityKey}`, {
                replace: true,
                relative: 'path',
              });
            }}
          />
        </ButtonGroup>
      </span>
    </Tooltip>
  );
};

export default DictionaryStepNav;
